<script>
	// 引入其余的组件
	import ListContainer from "@/views/Home/ListContainer/index.vue";
	import Recommend from "@/views/Home/Recommend/index.vue";
	import Rank from "@/views/Home/Rank/index.vue";
	import Like from "@/views/Home/Like/index.vue";
	import Floor from "@/views/Home/Floor/index.vue";
	import Brand from "@/views/Home/Brand/index.vue";
	
	import {mapState} from "vuex";
	
	export default {
		name: 'index',
		components: {
			ListContainer,
			Recommend,
			Rank,
			Like,
			Floor,
			Brand
		},
		mounted() {
			// 派发action，获取floor组件的数据
			this.$store.dispatch('getFloorList');
		},
		computed: {
			...mapState({
				floorList: state => state.home.floorList
			})
		}
	}
</script>

<template>
	<div>
		<!--三级联动全局组件，已经注册为全局组件，所以无需再次引用-->
		<TypeNav></TypeNav>
		<ListContainer></ListContainer>
		<Recommend></Recommend>
		<Rank></Rank>
		<Like></Like>
		<Floor v-for="(floor, index) in floorList" :key="floor.id" :list="floor"></Floor>
		<Brand></Brand>
	</div>
</template>

<style scoped lang="less">

</style>